<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeftBold, ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import router from "@/router";
import axios from "axios";
const textarea1 = ref('')
const textarea2 = ref('')
const textarea3 = ref('')
const last = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  console.log(dataFromPreviousPage);
  dataFromPreviousPage.skills = textarea1._value
  dataFromPreviousPage.experience = textarea2._value
  dataFromPreviousPage.awards = textarea3._value
  console.log(dataFromPreviousPage);
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
  router.push('/second');
};
onMounted(() => {
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  if (dataFromPreviousPage.skills) {
    textarea1.value = dataFromPreviousPage.skills;
  }
  if (dataFromPreviousPage.experience) {
    textarea2.value = dataFromPreviousPage.experience;
  }
  if (dataFromPreviousPage.awards) {
    textarea3.value = dataFromPreviousPage.awards;
  }
  console.log(dataFromPreviousPage);
});
const next = async () => {
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  console.log(dataFromPreviousPage);
  dataFromPreviousPage.skills = textarea1._value
  dataFromPreviousPage.experience = textarea2._value
  dataFromPreviousPage.awards = textarea3._value
  console.log(dataFromPreviousPage);
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
  const formData = new FormData();
  formData.append('context', JSON.stringify(dataFromPreviousPage));
  formData.append('id', dataFromPreviousPage.seekerid);

  await axios.post('http://localhost:8082/COSandAI/Generate', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  }).then(response => {
    if (response.data) {
      console.log(response.data.data);

      dataFromPreviousPage.part1 = response.data.data.part1;
      dataFromPreviousPage.part2 = response.data.data.part2;
      dataFromPreviousPage.part3 = response.data.data.part3;
      dataFromPreviousPage.part4 = response.data.data.part4;
      console.log(dataFromPreviousPage);
      localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
    }
  })
  const formData1 = new FormData();
  formData1.append('id', dataFromPreviousPage.seekerid);
  axios.post('http://localhost:8082/COSandAI/selectByID', formData1, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  }).then(response => {
    if (response.data.success) {
      console.log(111);
      console.log(response.data.data);
      localStorage.setItem('dataFromPreviousPage', JSON.stringify(response.data.data));
      localStorage.setItem('seekerId', dataFromPreviousPage.seekerid);
      router.push('/resume');
    } else {
      alert('登录失败，请检查手机号和验证码');
    }
  }).catch(error => {
    console.error('登录时出错:', error);
    alert('登录出错，请稍后重试');
  });
};
const upload = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/upload');
};
</script>

<template>
  <form class="body1" style="background-color: #f9f7f7;background-size: cover;">
    <el-row justify="center">
      <el-col :span="4" style="margin: auto"><el-icon size="128px" color="#3F72AF" @click="last"><ArrowLeftBold /></el-icon></el-col>
      <el-col :span="16" style="justify-content: center;text-align: center;">
        <h1>仅需三步，生成智能简历</h1>
        <div class="card3">
          <el-row :gutter="30" justify="space-around">
            <el-col :span="8" >
              <div style="background-color: #f9f7f7;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 100px;margin-right: 50px "></div>
            </el-col>
            <el-col :span="8" >
              <div style="background-color: #f9f7f7;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 50px;margin-right: 10px "></div>
            </el-col>
            <el-col :span="8" >
              <div style="background-color: #3F72AF;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 10px;margin-right: 50px "></div>
            </el-col>
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 268px;margin-right: auto;">技能特长</h2>
          </el-row>
          <el-row>
            <el-input
                v-model="textarea1"
                style="max-width: 400px;margin:auto;width: 400px"
                :rows="5"
                type="textarea"
                placeholder="请输入"
            />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 268px;margin-right: auto;">项目经验</h2>
          </el-row>
          <el-row>
            <el-input
                v-model="textarea2"
                style="max-width: 400px;margin:auto;width: 400px"
                :rows="5"
                type="textarea"
                placeholder="请输入"
            />
          </el-row>
          <el-row>
            <h2 style="margin-top: 20px;margin-left: 268px;margin-right: auto;">获奖情况</h2>
          </el-row>
          <el-row>
            <el-input
                v-model="textarea3"
                style="max-width: 400px;margin:auto;width: 400px"
                :rows="5"
                type="textarea"
                placeholder="请输入"
            />
          </el-row>
        </div>
      </el-col>
      <el-col :span="4" style="margin: auto"><el-icon size="128px" color="#3F72AF" @click="next"><ArrowRightBold /></el-icon></el-col>
    </el-row>
  </form>
  <button ref="labelIWantToHire" class="change" style="color: #3F72AF;font-weight: bold;font-size:12px;
  z-index: 99;position: absolute; top: 63%; right: 120px; transform: translateY(50%);background-color: #f9f7f7;box-shadow: 5px 5px 5px 2px #444444;"
  @click="upload"
  >
    已有简历？直接上传！</button>
</template>

<style scoped>
@import "../../assets/css/global.css";
.input-with-select1:deep(.el-input__wrapper) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  outline: #3F72AF 1px solid;
}
:deep(.el-input-group__prepend) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  outline: #3F72AF 1px solid;
}
:deep(.el-input__wrapper){
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px;
  outline: #3F72AF 1px solid;
}
.button-group {
  display: flex;
  gap: 100px; /* 按钮之间的间隔 */
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
}

button {
  padding: 10px 40px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 15px;
}

/* 活动状态按钮样式 */
.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.high_year{
  font-size: 24px;
  font-weight: bold;
  color: black;
  background-color: rgba(52,124,175,0.11);
}
.year{
  font-size: 22px;
  color: #444444;
}
.low_year{
  font-size: 16px;
  color: #888888;
}
</style>d